<!--
    * Time    : 2021-02-25 11:23:53
    * Author  : zhangTj
    * Desc    : 个人店铺修改信息页面
-->

<template>
    <div class="w750">
        <div>
            <div class="position-relative p-1 bg-fff d-flex">
                <input class="font-14 flex-1" style="height: 24px" type="text" placeholder="请输入店铺名称" v-model="shopInfo.shopName" />
                <i v-if="shopInfo.shopName" @click="clearTxt" style="width: 14px; height: 14px" class="mt">
                    <img src="@/assets/images/info-clear.png" class="w-100 h-100 v-top" alt />
                </i>
            </div>
            <div class="tip">2-10位字符</div>
            <div class="px py-1 w-100">
                <span
                    class="text-fff w-100 my-15p font-14 text-center rounded-3 d-block bg-main"
                    style="height; 48px; line-height: 48px;"
                    @click="save"
                >
                    保存
                </span>
            </div>
        </div>
    </div>
</template>

<script>
import { distributorShopUpdateShopName, distributorShopInfo } from '@/api/personal'

export default {
    name: '',
    components: {},
    data() {
        return {
            shopInfo: '' // 店铺信息
        }
    },
    computed: {},
    watch: {},
    created() {},
    destroyed() {},
    mounted() {
        this.getShopInfo()
    },
    methods: {
        // 店铺数据
        getShopInfo() {
            distributorShopInfo()
                .then((res) => {
                    if (!res.success) {
                        this.$toast(res.msg)
                        return
                    }
                    this.shopInfo = res.result
                })
                .catch((err) => {
                    this.$toast(err.msg)
                })
        },

        // 清空文本
        clearTxt() {
            this.shopName = ''
        },
        // 保存
        save() {
            if (!this.shopInfo.shopName) {
                this.$toast('请输入店铺名称')
                return
            }
            if (this.shopInfo.shopName.length < 2 || this.shopInfo.shopName.length > 10) {
                this.$toast('店铺名称不符合规范')
                return
            }
            distributorShopUpdateShopName({
                avatar: this.shopInfo.shopAvatar,
                shopName: this.shopInfo.shopName
            })
                .then((res) => {
                    if (!res.success) {
                        this.$toast(res.msg)
                        return
                    }
                    this.$toast('修改成功')
                    this.$router.replace({ name: 'personalInfo' })
                })
                .catch((err) => {
                    this.$toast(err.msg)
                })
        }
    }
}
</script>

<style scoped>
.tip {
    line-height: 20px;
    font-size: 12px;
    color: #999;
    padding: 0 10px;
    margin-top: 10px;
}
</style>
